<template>
    <div>
        <headbar
        title="探索详情"
        :left="true"
        classleft="el-icon-back"
        @handleleft='toback' 
        ></headbar>
        <div class="mar allout">
            <div>
                <img 
                v-for="(item,index) in worldobj.picture" 
                :key="index" 
                :src="item"
                class="img">
            </div>
<!-- 标题作者内容区域 -->
            <div>
                <div class="title">{{ worldobj.title }}</div>
                <div class="writer"><span>发布者：</span><span>{{ worldobj.username }}</span></div>
                <div class="centent">{{ worldobj.centent }}</div>
            </div>
<!-- 评论区 -->
            <div>
                <div class="artword"><span class="iconfontbig icon-a-pinglunxinxi"></span><span>评论区</span></div>

                <div>
                    <div v-for="(item,index) in worldobj.comments" :key="index" @click="at(item.username)">
                        <div>
                            <span class="name">{{ item.username }}</span>
                            <span v-if="item.to.length > 1" style="color:rgb(255, 81, 0); font-size: 0.20rem;">  回复  {{ item.to }}</span>
                        </div>

                        <div class="content">{{ item.centent }}</div>
                    </div>
                </div>
            </div>
<!-- 发表评论区域 -->
            <div class="pl">
                <input type="input" class="input" placeholder="写下你的感悟吧" ref="comment" v-model="text">
                <button class="botton" @click="publish()">发表</button>
            </div>
        </div>
    </div>
</template>

<script>
import headbar from '@/components/headbar.vue';
import axios from 'axios';
export default {
    components:{ headbar },
    mounted(){
        this.worldobj = this.$store.state.worldobj
    },
    data(){
        return {
            worldobj: {},
            to: '',
            text: ''
        }
    },
    methods:{
        toback(){
            this.$router.back()
        },
        at(name){
            this.$refs.comment.placeholder = '@'+name
            this.to = name
        },
        publish(){
           if(this.text.length>0){
                if(window.sessionStorage.getItem('token')){
                    let newcomment = {
                        numbering: this.worldobj.comments.length + 1,
                        username: this.$store.state.userobj.name,
                        userid: this.$store.state.userobj.id,
                        centent: this.text,
                        to: this.to
                    }
                    console.log(newcomment)
                    this.worldobj.comments.push(newcomment)
                    console.log(this.worldobj)
                    axios.put(`http://localhost:3000/exploration?id=${this.worldobj.id}`,this.worldobj.comments).then(res=>{
                        console.log(res.data)
                    })
                }else{
                    this.$router.push('/my')
                }
           }else{
            alert('不能发表空评论')
           }
        }
    }
}
</script>

<style lang="scss" scoped>
.img{
    width: 100%;
}
.allout{
    margin-bottom: 0.55rem;
}
.title{
    font-size: 0.35rem;
    padding-bottom: 10px;
}
.writer{
    padding-bottom: 10px;
    font-size: 0.15rem;
    color: rgb(124, 127, 126);
    border-bottom: 1px dashed rgb(74, 152, 126);
}
.centent{
    padding-bottom: 10px;
    border-bottom: 1px dashed rgb(74, 152, 126);
}
.artword{
    font-family: '楷体';
    font-size: 0.35rem;
    padding-bottom: 10px;
    color: rgb(74, 152, 126);
}
.name{
    font-size: 0.20rem;
    color: rgb(74, 152, 126);
}
.content{
    font-family: '楷体';
}
.pl{
    margin-top: 10px;
}
.input{
    width: 2.99rem;
    height: 0.31rem;
    padding: 1px 2px;
    font-size: 12px;
    border: 1px solid rgb(74, 152, 126);
    border-radius: 2px;
}
.botton{
    width: 0.5rem;
    height: 0.35rem;
    font-size: 12px;
    padding: 1px 2px;
    border: 1px solid rgb(74, 152, 126);
    border-radius: 2px;
    background-color: rgb(239, 239, 239);
}
</style>